<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!-- head-->
<head th:replace="fragments/common_header :: common-header(~{},~{})"></head>
<!-- head结束-->
<body>
<div id="wrapper">
    <!-- 左侧菜单栏-->
    <div th:replace="fragments/common_leftmenu :: left-menu"></div>
    <!-- 左侧菜单栏结束-->
    <div id="page-wrapper" class="gray-bg">
        <!-- 上部导航条 -->
        <div th:replace="fragments/common_top :: top-bar"></div>
        <!-- 上部导航条结束 -->
        <div class="wrapper wrapper-content animated fadeIn">
            <div class="ibox ">
                <div class="ibox-title">
                    <h2>请选择区域：</h2>
                </div>
                <div class="ibox-content">
                    <form th:method="post" th:action="@{/car/toList}">
                        <div class="form-group row">
                            <div class="col-sm-2">
                                <label class="col-form-label">城市：</label>
                                <select class="form-control" id="citySelected" name="shop_city">
                                    <option value="">请选择</option>
                                    <option th:each="item:${areas}"
                                            th:value="${item.getCity_name()}" th:text="${item.city_name}">
                                    </option>
                                </select>
                            </div>
                            <div class="col-sm-2">
                                <label class="col-form-label">地区：</label>
                                <select class="form-control" name="shop_area" id="areaSelected">
                                    <option value="">请选择</option>
                                </select>
                            </div>
                            <div class="col-sm-2">
                                <label class="col-form-label">门店：</label>
                                <select class="form-control" name="shop_name" id="shopSelected">
                                    <option value="">请选择</option>
                                </select>
                            </div>

                        </div>

                        <!--隐藏区域开始-->


                        <!--隐藏区域结束-->
                        <div class="form-group">
                            <div class="text-center">
                                <button class="btn btn-white btn-lg" type="button" onclick="doCancel();">取消</button>
                                <button class="btn btn-primary btn-lg" type="submit">确定</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- 底部栏 -->
        <div th:replace="fragments/common_footer :: foot-bar"></div>
        <!-- 底部栏结束 -->
    </div>
</div>

<div th:replace="fragments/common_script :: scripts"></div>

<script>
    // 取消按钮
    function doCancel()
    {
        window.location.href = document.referrer;
    }

    $("#citySelected").bind("change", function () {
        $('#areaSelected option').not(":first").remove();
        $.ajax({
            url: '/car/area',
            data: {
                city: $("#citySelected").val()
            },
            success: function (d) {
                if (d) {
                    var data = d;
                    for (var i in data) {
                        /*循环添加option*/
                        $("#areaSelected:last").append("<option value=" + data[i] + ">" + data[i] + "</option>")
                    }
                } else {
                    layer.msg("车辆加载失败", {icon: 2, time: 2000})
                }
            }
        })
    });

    $("#areaSelected").bind("change", function () {
        $('#shopSelected option').not(":first").remove();
        $.ajax({
            url: '/car/shopName',
            data: {
                city: $("#citySelected").val(),
                area: $("#areaSelected").val()
            },
            success: function (d) {
                if (d) {
                    var data = d;
                    for (var i in data) {
                        /*循环添加option*/
                        $("#shopSelected:last").append("<option value=" + data[i] + ">" + data[i] + "</option>")
                    }
                } else {
                    layer.msg("车辆加载失败", {icon: 2, time: 2000})
                }
            }
        })
    });
</script>
</body>
</html>